<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/animation.css" rel="stylesheet">
    <link href="./css/page4.css" rel="stylesheet">
    <link rel="stylesheet" href="css/fly.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/screenPlan.js"></script>
    <style>

    </style>
</head>
<body>
    <div class="page4">
        <div class="area1">
            <div class="high-count"></div>
        </div>
        <img class="ke-du" src="img4/刻度.png">
        <img class="boy biao-bai1" src="img4/boy.png">
        <img class="girl biao-bai1" src="img4/girl.png">
        <img class="circle biao-bai1" src="img4/circle.png">
        <img class="break-heart biao-bai1" src="img4/breakHeart.png">
        <div class="msg1">" 我喜欢你 "</div>
        <div class="msg2">" 我不喜欢你 "</div>
        <div class="msg3">" 为什么 "</div>
        <div class="msg4">" 喜欢你犯法 "</div>
        <div class="msg-fail1 biao-bai1">" 再见，初恋 "</div>
        <div class="msg-fail2 biao-bai1">" 龙哥第N-1次表白失败 "</div>


        <img class="heart biao-bai2" src="img4/broken_heart1.png">
        <img class="circle2 biao-bai2" src="img4/circle2.png">
        <div class="msg11">" 我暗恋你很久了 "</div>
        <div class="msg22">" 然后呢 "</div>
        <div class="msg33">" ... ... ... "</div>
        <div class="msg44">" ... ... ... "</div>
        <div class="msg-fail11 biao-bai2">" 再见，爱情 "</div>
        <div class="msg-fail22 biao-bai2">" 龙哥第N-10次表白失败 "</div>

        <img class="man biao-bai3" src="img4/man1.png">
        <img class="woman biao-bai3" src="img4/woman.png">
        <div class="msg111">" 小姐姐，问个路 "</div>
        <div class="msg222">" 你要去哪里 "</div>
        <div class="msg333">" 我要去你心里 "</div>
        <div class="msg444">" 我的心如大山你会迷路的 "</div>
        <div class="msg-fail111 biao-bai3">" 再见，套路 "</div>
        <div class="msg-fail222 biao-bai3">" 龙哥第N-20次表白失败 "</div>
    </div>
    <div class="page5">
        <div class="zhuzi zhuzi-move"></div>
        <div class="jump_heart"></div>
        <img class="zhiwen" src="img4/zhiwen.png">
        <img class="word6" src="img4/word6.png">
        <div class="word-box">
            <img class="word1" src="img4/word1.png">
            <img class="word2" src="img4/word2.png">
            <img class="word3" src="img4/word3.png">
            <img class="word4" src="img4/word4.png">
            <img class="word5" src="img4/word5.png">
        </div>
    </div>
    <div class="left_heart">
        <div class="fly_heart">
        </div>
    </div>
    <div class="right_heart">
        <div class="fly_UP">
        </div>
    </div>
</body>
<script>
    $(function () {
      var winHeight = $(window).height();
      var areaHeight = $(".page4").height();
      var marginTop = winHeight - areaHeight;
      if (marginTop > 0) {
        $(".page4").css("margin-top", marginTop/2);
      }
      $(window).resize(function () {
        var winHeight = $(window).height();
        var areaHeight = $(".page4").height();
        var marginTop = winHeight - areaHeight;
        if (marginTop > 0) {
          $(".page4").css("margin-top", marginTop/2);
        }
      })
      // 第一段
      $(".msg1").addClass("jian-ru-boy");
      $(".boy").show().addClass("boy-in");
      setTimeout(function () {
        $(".circle").fadeIn();
        $(".girl").show().addClass("girl-in");
        $(".msg2").addClass("jian-ru-girl");
      }, 1000);
      setTimeout(function () {
        $(".msg3").addClass("jian-ru-boy");
      }, 2000);
      setTimeout(function () {
        $(".msg4").addClass("jian-ru-girl");
      }, 3000);
      setTimeout(function () {
        $(".break-heart").fadeIn();
      }, 4000);
      setTimeout(function () {
        $(".msg-fail1").show().addClass("fail1-show")
      }, 5000);
      setTimeout(function () {
        $(".msg-fail2").show().addClass("fail2-show")
      }, 6000);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 7000);
      // 第二段
      setTimeout(function () {
        $(".high-count").addClass("high-count2")
        $(".msg11").addClass("jian-ru-boy");
        $(".heart").show().addClass("boy-in");
      }, 8000);
      setTimeout(function () {
        $(".msg22").addClass("jian-ru-girl");
        $(".circle2").fadeIn();
      }, 9000);
      setTimeout(function () {
        $(".msg33").addClass("jian-ru-boy");
      }, 10000);
      setTimeout(function () {
        $(".msg44").addClass("jian-ru-girl");
      }, 11000);
      setTimeout(function () {
        $(".heart").attr("src", "img4/broken_heart3.png")
        $(".msg-fail11").show().addClass("fail1-show")
      }, 13000);
      setTimeout(function () {
        $(".msg-fail22").show().addClass("fail2-show")
      }, 14000);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 15000);
      setTimeout(function () {
        $(".biao-bai2").fadeOut();
      }, 16000);
      // 第三段
      setTimeout(function () {
        $(".high-count").addClass("high-count3")
        $(".man").show().addClass("boy-in");
        $(".msg111").addClass("jian-ru-boy");
      }, 17000);
      setTimeout(function () {
        $(".woman").show().addClass("girl-in");
        $(".msg222").addClass("jian-ru-girl");
      }, 18000);
      setTimeout(function () {
        $(".msg333").addClass("jian-ru-boy");
      }, 19000);
      setTimeout(function () {
        $(".msg444").addClass("jian-ru-girl");
      }, 20000);
      setTimeout(function () {
        $(".man").addClass("man2").attr("src", "img4/man2.png")
        $(".msg-fail111").show().addClass("fail1-show")
      }, 22000);
      setTimeout(function () {
        $(".msg-fail222").show().addClass("fail2-show")
      }, 23000);
      setTimeout(function () {
        $(".page4").fadeOut();
        $(".page5").fadeIn();
      }, 24000);
      setTimeout(function () {
        $(".left_heart").show().addClass("fly_left");
        $(".right_heart").show().addClass("fly_right");
        $(".page5").fadeIn();
        $(".word1").show().addClass("word1-in")
      }, 1000);
      setTimeout(function () {
        $(".word2").show().addClass("word2-in")
      }, 2000);
      setTimeout(function () {
        $(".word3").show().addClass("word3-in")
      }, 4000);
      setTimeout(function () {
        $(".word4").show().addClass("word4-in")
      }, 6000);
      setTimeout(function () {
        $(".word5").show().addClass("word5-in")
      }, 8000);
      
      
      // 指纹点击
      var defaultHeight = 1.1
      var defaultBottom = 3.4
      $(".zhiwen").click(function () {
        defaultHeight = defaultHeight + 0.3;
        defaultBottom = defaultBottom + 0.3;
        if (defaultHeight > 8.9) {
          $(".zhuzi").addClass("zhuzi-full")
        } else {
          $(".zhuzi").removeClass("zhuzi-move").css("height", defaultHeight + "rem");
        }
        $(".jump_heart").css("bottom", defaultBottom + "rem");
      })
    })
</script>
</html>